<template>
  <div class="page2">
    <TopNav/>
    <div style="height: 0.2rem;"></div>
    <Row>
      <Col span="12">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>不良分布图</span></div>
        <div class="content">
          <div class="bar-item">
            <div id="pie" style="width: 100%;height:5.4rem;"></div>
            <div class="labels">
              <div class="color">A-001 座圈外观不良</div>
              <div class="color">A-002 座圈间隙不合格</div>
              <div class="color">A-003 上盖外观不良</div>
              <div class="color">A-004 上盖间隙不合格</div>
              <div class="color">A-005 喷嘴体内有异物</div>
              <div class="color">A-006 喷嘴体内有水渍</div>
              <div class="color">A-007 喷管外观划伤</div>
              <div class="color">A-008 喷管间隙不过</div>
              <div class="color">A-009 陶瓷外观不良</div>
              <div class="color">A-010 整机间隙不过</div>
              <div class="color">A-011 外壳不良</div>
              <div class="color">A-012 其他外观问题</div>
            </div>
          </div>
        </div>
      </div>
      </Col>
      <Col span="12">
      <div class="box box1">
        <div class="left-top"></div>
        <div class="right-top"></div>
        <div class="left-bottom"></div>
        <div class="right-bottom"></div>
        <div class="title"><span>原材料不良分布图</span></div>
        <div class="content">
          <div class="labels" style="float: right; margin: 0.3rem; font-size: 0.24rem;">
            <div class="label blue">已维修</div>
          </div>
          <div class="bar-item" style="margin: 1.7rem 0;">
            <Bar :chart-id="chart1Id" chart-style="height:4rem" :chart-data="seriesData1"/>
          </div>
        </div>
      </div>
      </Col>
    </Row>
  </div>
</template>

<script>
  import TopNav from '../components/TopNav.vue'
  import Bar from '../components/Bar.vue'
  import Line1 from '../components/Line.vue'
  import Gauge from '../components/Gauge.vue'
  import input1 from '../components/input.vue'
  import input2 from '../components/input2.vue'
  
  export default {
    name: 'index',
    components: {
      TopNav,
      input1,
      input2,
      Bar,
      Line1,
      Gauge
    },
    data() {
      return {
        chart1Id: 'chart1',
        chart1Data: [
          {
            name: '上盖',
            num1: 97
          },
          {
            name: '外壳',
            num1: 74
          },
          {
            name: '控制板',
            num1: 86
          },
          {
            name: '陶瓷',
            num1: 74
          },
          {
            name: '坐团',
            num1: 86
          }
        ],
        seriesData1: {
          max: 100,
          legendData: ['达标率'],
          data: {}
        }
      }
    },
    mounted() {
      this.seriesData1.data = this.getSeriesData(this.chart1Data)
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        toolbox: {
          show: true
        },
        calculable: true,
        series: [
          {
            name: '访问来源',
            type: 'pie',
            calculable: true,
            radius: ['20%', '60%'],
            center: ['50%', '40%'],
            itemStyle: {
              label: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: true
              }
            },
            emphasis: {
              label: {
                show: true,
                position: 'center',
                textStyle: {
                  fontWeight: 'bold'
                }
              }
            },
            data: [
              {
                value: 335,
                name: 'A-001 座圈外观不良',
                itemStyle: {
                  color: '#1c9ff7'
                }
              },
              {
                value: 310,
                name: 'A-002 座圈间隙不合格',
                itemStyle: {
                  color: '#6fc7f9'
                }
              },
              {
                value: 234,
                name: 'A-003 上盖外观不良',
                itemStyle: {
                  color: '#71c4f8'
                }
              },
              {
                value: 135,
                name: 'A-004 上盖间隙不合格',
                itemStyle: {
                  color: '#50e69f'
                }
              },
              {
                value: 1548,
                name: 'A-005 喷嘴体内有异物',
                itemStyle: {
                  color: '#f7eb59'
                }
              },
              {
                value: 335,
                name: 'A-006 喷嘴体内有水渍',
                itemStyle: {
                  color: '#faaf49'
                }
              },
              {
                value: 310,
                name: 'A-007 喷管外观划伤',
                itemStyle: {
                  color: '#ff7944'
                }
              },
              {
                value: 234,
                name: 'A-008 喷管间隙不过',
                itemStyle: {
                  color: '#d41117'
                }
              },
              {
                value: 135,
                name: 'A-009 陶瓷外观不良',
                itemStyle: {
                  color: '#871cb7'
                }
              },
              {
                value: 1548,
                name: 'A-010 整机间隙不过',
                itemStyle: {
                  color: '#b930de'
                }
              },
              {
                value: 234,
                name: 'A-011 外壳不良',
                itemStyle: {
                  color: '#0c62b9'
                }
              },
              {
                value: 135,
                name: 'A-012 其他外观问题',
                itemStyle: {
                  color: '#0b80df'
                }
              }
            ]
          }
        ]
      }
      let myChart = this.$echarts.init(document.getElementById('pie'))
      myChart.setOption(option, true)
    },
    methods: {
      toAssemblyLine() {
        this.$router.push({path: '/assemblyline'})
      },
      getSeriesData(data) {
        let seriesData = {
          names: [],
          series1: [],
          series2: [],
          series3: [],
          series4: []
        }
        for (let i = 0; i < data.length; i++) {
          if (data[i].name) {
            seriesData.names.push(data[i].name)
          }
          if (data[i].num1) {
            seriesData.series1.push(data[i].num1)
          }
          if (data[i].num2) {
            seriesData.series2.push(data[i].num2)
          }
          if (data[i].num3) {
            seriesData.series3.push(data[i].num3)
          }
          if (data[i].num4) {
            seriesData.series4.push(data[i].num4)
          }
        }
        return seriesData
      },
      getSeriesData2(data) {
        let seriesData = []
        for (let i = 0; i < data.length; i++) {
          let obj = {
            name: data[i].name,
            value: data[i].num
          }
          seriesData.push(obj)
        }
        return seriesData
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" type="text/less" scoped>
  .box {
    border: 0.02rem solid #6caffe;
    margin: 0.02rem;
    position: relative;
    background: rgba(11, 26, 82, 0.34);
    box-shadow: inset 0 0 0.3rem 0.1rem rgba(51, 126, 246, 0.5);
    .title {
      position: relative;
      background-color: #132c7e;
      font-size: 0.28rem;
      font-weight: bolder;
      height: 0.47rem;
      line-height: 0.47rem;
      text-align: left;
      padding: 0 0.2rem;
      box-shadow: inset 0 0.04rem 0.1rem 0 rgba(51, 126, 246, 0.8);
      span {
        background-image: -webkit-gradient(linear, left 0, right 0, from(#00eaffFF), to(#01aaffFF));
        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
      }
    }
    .content {
      padding: 0.2rem;
      height: 8rem;
    }
  }
  .top-style {
    content: '';
    position: absolute;
    background-color: #00FCF9;
  }
  .left-top {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      left: -0.02rem;
      top: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      left: -0.02rem;
      top: -0.02rem;
    }
  }
  .right-top {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      right: -0.02rem;
      top: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      right: -0.02rem;
      top: -0.02rem;
    }
  }
  .right-bottom {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      right: -0.02rem;
      bottom: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      right: -0.02rem;
      bottom: -0.02rem;
    }
  }
  .left-bottom {
    &:before {
      .top-style;
      width: 0.1rem;
      height: 0.02rem;
      left: -0.02rem;
      bottom: -0.02rem;
    }
    &:after {
      .top-style;
      width: 0.02rem;
      height: 0.1rem;
      left: -0.02rem;
      bottom: -0.02rem;
    }
  }
  .labels {
    overflow: hidden;
    margin-bottom: 0.1rem;
    .label {
      float: left;
      color: #ffffff;
      padding-left: 0.23rem;
      position: relative;
      margin-right: 0.1rem;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.09rem;
        width: 0.18rem;
        height: 0.18rem;
      }
      &.normal:before {
        background-color: #4CEC9FFF;
      }
      &.off:before {
        background-color: #FFB500FF;
      }
      &.alarm:before {
        background-color: #FC0D1BFF;
      }
      &.blue:before {
        background-color: #00C3F8FF;
      }
    }
    .color {
      color: #ffffff;
      padding-left: 0.3rem;
      text-align: left;
      position: relative;
      height: 0.4rem;
      line-height: 0.4rem;
      float: left;
      margin-left: 2%;
      width: 31.33%;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -0.05rem;
        width: 0.22rem;
        height: 0.1rem;
      }
      &:nth-of-type(1):before {
        background-color: #1c9ff7;
      }
      &:nth-of-type(2):before {
        background-color: #6fc7f9;
      }
      &:nth-of-type(3):before {
        background-color: #71c4f8;
      }
      &:nth-of-type(4):before {
        background-color: #50e69f;
      }
      &:nth-of-type(5):before {
        background-color: #f7eb59;
      }
      &:nth-of-type(6):before {
        background-color: #faaf49;
      }
      &:nth-of-type(7):before {
        background-color: #ff7944;
      }
      &:nth-of-type(8):before {
        background-color: #d41117;
      }
      &:nth-of-type(9):before {
        background-color: #871cb7;
      }
      &:nth-of-type(10):before {
        background-color: #b930de;
      }
      &:nth-of-type(11):before {
        background-color: #0c62b9;
      }
      &:nth-of-type(12):before {
        background-color: #0b80df;
      }
    }
  }
  .bar-item {
    position: relative;
  }
</style>
